<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head lang="en">
    <th:block th:include="include :: header('添加角色')"/>
</head>
<body>
<script src="/js/layui-xtree.js"></script>
<form class="layui-form" lay-filter="form">
    <input type="hidden" name="id" id="id">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称：</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" name="roleName" lay-verify="required" autocomplete="off" placeholder="请输入名称"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">角色描述：</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" id="roleIntro" name="roleIntro" lay-verify="required" autocomplete="off"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态：</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="0" title="开启">
            <input type="radio" name="status" value="1" title="关闭">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限：</label>
        <div class="layui-input-block">
            <div class="layui-form">
                <div id="xtree1" class="xtree_contianer"></div>
            </div>
        </div>
    </div>
    <div style="display: none">
        <button class="layui-btn" lay-submit lay-filter="*" id="submit">立即提交</button>
    </div>
</form>

<th:block th:include="include :: footer"/>

<script type="text/javascript">
    layui.use(['form'], function () {
        var form = layui.form;
        var url = "/sysUser/treeResource.json";
        if (parent.json.id) {
            var json = parent.json;
            console.log(json.id)
            form.val("form", {
                "id": json.id + "",
                "roleName": json.roleName,
                "roleIntro": json.roleIntro,
                "status": json.status + ""
            })
            url = url + "?id=" + json.roleId;
        }
        xtree = new layuiXtree({
            elem: 'xtree1'   //(必填) 放置xtree的容器，样式参照 .xtree_contianer
            , form: form     //(必填) layui 的 from
            , data: url    //(必填) json数据
            , isopen: false
        });
        form.on('submit(*)', function (data) {
			var str = "";
			$("input:checkbox[class='layui-xtree-checkbox']:checked").each(function (i) {
				str += $(this).val() + ",";
			});
			if(str==""){
				config.alert("请选择权限");
				return  false;
			}
			data.field.str=str;
            config.commPost("/sysUser/addRole.json", data.field, function (data, info) {
                parent.config.tableRefresh();
                parent.config.closeLayer(info);
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
<script type="text/javascript">
    function ApplicationSave() {
        document.getElementById("submit").click();

		//
        // //从父层获取值，json是父层的全局js变量。eval是将该string类型的json串变为标准的json串
        // var roleName = document.getElementById("roleName").value;
        // var roleIntro = document.getElementById("roleIntro").value;
        // var status = $("input[name='sex']:checked").val();
        // //获取checkbox[name='like']的值
        // var str = "";
        // $("input:checkbox[class='layui-xtree-checkbox']:checked").each(function (i) {
        //     str += $(this).val() + ",";
        // });
        // $.ajax({
        //     async: false,
        //     url: "/sysUser/addRole.json",
        //     type: "POST",
        //     data: {"roleName": roleName, "roleIntro": roleIntro, "status": status, "str": str},
        //     dataType: "json",
        //     success: function (data) {
        //         layer.alert(data.info);
        //     }
        // });
    }
</script>
</body>
</html>
